<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this 是谁：谁调用就是谁. xxx.func()
        // 看不出来谁调用，一般是 window

        // 全局的变量都相当于是添加给了 window对象
        // 鸿蒙中没有这个对象 
        function showThis() {
            console.log('showThis', this);
        }
        showThis();//指向window


        // 看的出来谁调用
        const person = {
            name: 'Alice',
            like: '看电视',

            myfunc() {
                console.log('myfunc', this);//指向person
            },
            // 箭头函数：创建时会绑定当前作用域中的 this，如果有的话
            // 当前作用域没有 this，向上一级去找，找到全局为止，还找不到。window
            // 常见的作用域：函数作用域。块级作用域，模块作用域，全局作用域
            sayHi: () => {
                console.log('sayHi', this);
            },

            hello() {
                console.log('hello', this);//指向person
                setTimeout(() => {
                    console.log('setTimeout1', this);//指向person
                }, 1000)

                setTimeout(function () {
                    console.log('setTimeout2', this);//指向window
                }, 1000)
            }

        }
        person.myfunc(); //指向person
        person.sayHi(); //指向window
        person.hello();//指向person



    </script>
</body>

</html>
<!-- 面试话术：
        聊到了 this，聊到了箭头函数。聊到了坑点
        this 这个东西在JS 和 TS 中都很灵活，因为会动态的改变，但是有一些记忆的规则：
         谁调用就是谁，看不出来谁调用，一般是全局对象，如果实在浏览器中，这个对象是 window
       也有特殊情况，比如箭头函数，创建的时候 this 就绑定了，绑定的是上一级作用域中的 this，比如函数作用域，块级作用域，全局，模块。。
        箭头函数，在鸿蒙开发中经常需要使用，因为如果不指定 this 可能出现指向错误的问题，导致无法正常取值，buildParams 中，子通过回调函数传递数据给父组件，也需要通过箭头函数，这两个是比较常见的，我也掉过坑
        在 js 中早期还有一些更灵活的写法，比如 call，apply，bind，但是有了箭头函数之后一般不需要使用他们了。
       【下一句，看是否准备了】之前研究 this 指向的时候看过，还自己手写过 -->